<template>
  <div style="font-size: 16px; color: black">
    <p>1、完整的 ts 的支持；</p>
    <p>2、足够轻量，压缩后的体积只有1kb左右;</p>
    <p>3、去除 mutations，只有 state，getters，actions；</p>
    <p>4、actions 支持同步和异步；</p>
    <p>
      5、代码扁平化没有模块嵌套，只有 store 的概念，store
      之间可以自由使用，每一个store都是独立的
    </p>
    <p>6、无需手动添加 store，store 一旦创建便会自动添加；</p>
    <p>7、支持Vue3 和 Vue2</p>
  </div>
  <div style="font-size: 16px; color: black">
    安装引入
    <p>npm i pinia</p>
    <pre>
        import { createPinia } from "pinia";
        const store = createPinia()
        app.use(store)
    </pre>
    <p>pinia 在页面的使用:{{ Test.current }}==={{ Test.name }}</p>
    <div>
      <button @click="handleCurrent1">修改pinia的值方法一</button>
      <button @click="handleCurrent2">修改pinia的值方法二</button>
      <button @click="handleCurrent3">修改pinia的值方法三</button>
      <button @click="handleCurrent4">修改pinia的值方法四</button>
      <button @click="handleCurrent5">修改pinia的值方法五</button>
    </div>
    <div>
      <div>pinia 解构</div>
      <p>
        const {current,name } = Test
        这样解构是不存在响应式的，需要使用storeToRefs 解构，如：const {name
        ,current} = storeToRefs(Test)
      </p>
      <button @click="handleLogin">异步调用</button>
      <div>getter 使用:{{Test.currentGetter}}</div>
      <button @click="handleReset">reset</button>
    </div>
  </div>
  <div>pinia 持久化：main.ts</div>
</template>

<script lang="ts" setup>
//  pinia 在页面的使用
import { useTestStore } from "../../store";
const Test = useTestStore();
const handleCurrent1 = () => {
  Test.current++;
};
const handleCurrent2 = () => {
  Test.$patch({
    current: 100,
  });
};
const handleCurrent3 = () => {
  //  这种方法可以添加逻辑处理
  Test.$patch((state) => {
    if (true) {
      state.current = 10;
    }
  });
};
const handleCurrent4 = () => {
  // 这种方式必须修改整个对象，存在弊端，很少用
  Test.$state = {
    current: 20,
    name: "hello Pinia",
  };
};
const handleCurrent5 = () => {
  // 这种方式通过调用action修改
  Test.setCurrent(30);
};


const handleLogin = () => {
    Test.userLogin()
}
// reset 用法
const handleReset = () => {
    Test.$reset()
}
//  只要state的值发生变化就会触发的函数
Test.$subscribe((args,state)=> {

})
//  只要调用action的方法就会触发的函数,当组件被销毁还想要继续监听，可以设置为true
Test.$onAction((args)=> {

},true)
</script>

<style>
</style>